<template>
	<div id="recharge">
		<p class="Title">账户充值</p>
		<!-----------资金明细------------>
		<div class="recharge_1">
			<img src="../../static/img/recharge-01.png"/>
			<div class="recharge_1_text">
				<p class="recharge_1_title">资金明细</p>
				<div class="recharge_1_content">
					<p>当前可用余额：<span>{{returnFloat(balance)}}元</span></p>
					<p>担保任务资金：<span>{{returnFloat(freeze)}}元</span></p>
					<!--<p>提现中：<span>{{returnFloat(putForward)}}元</span></p>-->
					<!--<p>推广获利：<span>{{returnFloat(spread)}}元</span></p>-->
				</div>
			</div>
		</div>
		<!-------账户充值/充值记录------------>
		<ul class="recharge_2">
			<li @click="recharge_2 = 1" :class="recharge_2 == 1?'recharge_2_active':''">账户充值</li>
			<span>|</span>
			<li @click="recharge_2 = 2" :class="recharge_2 == 2?'recharge_2_active':''">银行卡充值进度</li>
		</ul>
		<!-----------充值方式--------------->
		<div v-show="recharge_2 == 1" class="recharge_3">
			<div class="recharge_way">
				<p>充值方式：</p>
				<ul>
					<li @click="rechargeWay = 1" :class="rechargeWay == 1?'way_active':''">
						<p>银行卡转账充值</p>
						<img v-show="rechargeWay == 1" src="../../static/img/recharge-02.png"/>
					</li>
					<li @click="rechargeWay = 2" :class="rechargeWay == 2?'way_active':''">
						<p>微信充值</p>
						<img v-show="rechargeWay == 2" src="../../static/img/recharge-02.png"/>
					</li>
				</ul>
			</div>
			<!----------银行卡转账充值------------>
			<div v-show="rechargeWay == 1" class="recharge_way_1">
				<!--------收款账号------------>
				<div class="recharge_3_item">
					<p>收款账号：</p>
					<div class="account_number">
						<p>转账途径：电脑网银、手机银行</p>
						<p>收款户名：<span>翟鑫鑫(zhai xin xin)</span></p>
						<p>收款账号：<span>6222 6207 5000 9321 245</span></p>
						<p>收款银行：交通银行 中山小榄支行</p>
					</div>
				</div>
				<p class="cue">*为了方便对账,转账别转小数,如"500.12"</p>
				<!-------银行卡名称----------->
				<div class="recharge_3_item">
					<p>银行卡名称：</p>
					<el-select v-model="way1.bankName" placeholder="请选择银行名称" @blur="isfocus = 0" :class="isfocus == 1?'focus':''">
					    <el-option
					        v-for="item in bankList"
					        :key="item.value"
					        :label="item.label"
					        :value="item.value">
					    </el-option>
					</el-select>
				</div>
				<!--------银行卡号------------>
				<div class="recharge_3_item">
					<p>银行卡号：</p>
					<input type="text" v-model="way1.bankNum" placeholder="请输入转账银行卡号" @keyup="isfocus = 0" :class="isfocus == 2?'focus':''"/>
				</div>
				<!--------持卡人姓名------------>
				<div class="recharge_3_item">
					<p>持卡人姓名：</p>
					<input type="text" v-model="way1.realname" placeholder="请输入持卡人姓名" @keyup="isfocus = 0" :class="isfocus == 3?'focus':''"/>
				</div>
				<!--------手机号码------------>
				<div class="recharge_3_item">
					<p>手机号码：</p>
					<input type="text" v-model="way1.phone" placeholder="请输入手机号码" @keyup="isfocus = 0" :class="isfocus == 4?'focus':''"/>
				</div>
				<!--------转账金额------------>
				<div class="recharge_3_item">
					<p>转账金额：</p>
					<div class="money">
						<input type="text" v-model="way1.money" placeholder="请输入转账金额" @keyup="isfocus = 0" :class="isfocus == 5?'focus':''" @blur="clearNoNum"/>
						 <span>元</span>
					</div>
				</div>
				<div class="recharge_3_btn">
					<input @click="recharge" type="button" value="确认提交" />
				</div>
			</div>
			<!----------第三方渠道充值------------>
			<div v-show="rechargeWay == 2" class="recharge_way_2">
				<!--------支付宝微信选择----------->
				<div class="recharge_3_item">
					<p>选择方式：</p>
					<ul class="wx_zfb">
						<li @click="way2.type = 2" :class="way2.type == 2?'wx_zfb_active':''">
							<img src="../../static/img/recharge-04.png"/>
							<img v-show="way2.type == 2" src="../../static/img/recharge-02.png"/>
						</li>
						<!--<li @click="way2.type = 3" :class="way2.type == 3?'wx_zfb_active':''">
							<img src="../../static/img/recharge-03.png"/>
							<img v-show="way2.type == 3" src="../../static/img/recharge-02.png"/>
						</li>-->
					</ul>
				</div>
				<!----------转账金额------------>
				<div class="recharge_3_item">
					<p>转账金额：</p>
					<div class="money">
						<input type="text" v-model="way2.money" placeholder="请输入转账金额" @keyup="clearNoNum2" maxlength="8"/>
						<span>元</span>
					</div>
					<input type="button" @click="wechatPay" value="确认转账" />
				</div>
				<!----------二维码------------>
				<div class="pay_code">
					<p>转账金额<span>{{way2.money}}</span>元，实际到账<span>{{way2.money*0.99}}</span>元(微信转账需收取1%的微信手续费)，请使用微信扫描下方二维码完成支付</p>
					<div class="code_box">
						<div class="code">
							<img v-show="qr" src="../../static/img/recharge-06.png"/>
							<div id="wechatPayCode"></div>
						</div>
						<img v-if="way2.type == 2" src="../../static/img/recharge-07.png"/>
						<img v-else-if="way2.type == 3" src="../../static/img/recharge-08.png"/>
					</div>
				</div>
			</div>
			<!--------温馨提示------------>
			<div class="warm_prompt">
				<div>
					<img src="../../static/img/recharge-05.png"/>
					<p>温馨提示：</p>
				</div>
				<ul>
					<li>1.使用微信转账需收取<span>1%</span>的微信手续;</li>
					<li>2.自动到账，无需等待充值审核;</li>
					<li>3.<span>18:00</span>后或<span>法定节假日</span>建议使用微信转账;</li>
				</ul>
			</div>
		</div>
		<!---------充值记录-------------->
		<div v-show="recharge_2 == 2" class="recharge_4">
			<!---------筛选栏------------>
			<div class="search">
				<input type="text" placeholder="请输入流水号" v-model="bankPay" />
				<p>选择时间段：</p>
				<el-date-picker
			        v-model="time"
			        type="daterange"
			        range-separator="至"
			        start-placeholder="开始日期"
			        end-placeholder="结束日期">
			    </el-date-picker>
			    <input @click="search" type="button" value="搜索" />
			</div>
			<!--------记录列表--------->
			<div class="recharge_list">
				<div class="list_title">
					<p>充值时间</p>
					<p>交易号</p>
					<p>充值金额</p>
					<p>充值状态</p>
				</div>
				<div v-if="rechargeList.length>0" v-for="item in rechargeList" class="list_item">
					<p>{{getDate(item.createtime)}}</p>
					<p>{{item.bankPay}}</p>
					<p>{{item.money}}</p>
					<p>{{getStatus(item.status)}}</p>
				</div>
				<el-pagination
					v-if="rechargeList.length>0"
					background
				    @current-change="handleCurrentChange"
				    :current-page.sync="currentPage"
				    :page-size="pageSize"
				    :pager-count="5"
				    layout="prev, pager, next, jumper"
				    :total="total">
				</el-pagination>
				<!----------没有数据了------------>
				<div v-else class="noData">
					<img src="../../static/img/nodata.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default{
	name:'recharge',
	data:function(){
		return{
			isfocus:0,//是否为空
			balance: '1.5',//余额
			freeze: '0',//冻结资金
			putForward: '0',//提现中
			spread: '0',//推广获利
			recharge_2: 1,//账户充值/充值记录
			rechargeWay: 1,//充值方式
			bankList:[//银行列表
				{label: '中国工商银行',value: '中国工商银行'},
				{label: '中国农业银行',value: '中国农业银行'},
				{label: '中国建设银行',value: '中国建设银行'},
				{label: '中国银行',value: '中国银行'},
				{label: '招商银行',value: '招商银行'},
				{label: '交通银行',value: '交通银行'},
				{label: '光大银行',value: '光大银行'},
				{label: '中信银行',value: '中信银行'},
				{label: '华夏银行',value: '华夏银行'},
				{label: '民生银行',value: '民生银行'},
				{label: '广发银行',value: '广发银行'},
				{label: '兴业银行',value: '兴业银行'},
			],
			//--------银行卡转账充值------------
			way1:{
				type: 1,
				bankName: '',//银行名称
				bankNum: '',//银行卡号
				realname: '',//持卡人姓名 
				phone: '',//手机号码
				money: '',//转账金额
			},
			//--------第三方渠道充值------------
			way2:{
				type:2,
				money: '',//微信支付宝转账金额
				money2:'',
			},
			payCode: '',//生成的支付二维码
			bankPay: '',//交易号
			time: '',//筛选时间段
			total: 100,//总条数
			pageSize: 10,//每页条数
			currentPage: 1,//当前页码
			index: 0,//消息序号
			qr:true,
			//--------充值列表-------------
			rechargeList: [
				{
					createtime: '1',
					bankPay: '2',
					money: '3',
					status: '4',
				}
			]
		}
	},
	methods:{
		//--------银行卡转账----------
		bankSub:function(){
			if(!this.way1.bankName){
				alert('请选择银行名称');
			}else if(!this.way1.bankNum){
				alert();
			}
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//-----------搜索---------------
		search:function(){
			var _this = this;
			var startTime = _this.getDate(this.time[0]);
			var endTime = _this.getDate(this.time[1]);
			var postData = _this.$qs.stringify({
	        	startPage: _this.currentPage,
				pageSize: _this.pageSize,
				tradeNumber:_this.bankPay,
				startTime:startTime,
				endTime:endTime
	        });
			_this.$axios.post('/agent/recharge/show',postData).then(function(res){
			    var data = res.data.result;
		    	_this.rechargeList = data.list;
	    		_this.total = data.total;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		recharge:function(){
			var _this = this;
			_this.$loading.show();
			if(!$.trim(_this.way1.bankName)){
				_this.$loading.hide();
				_this.isfocus = 1;
			}else if(!$.trim(_this.way1.bankNum)){
				_this.$loading.hide();
				_this.isfocus = 2;
			}else if(!$.trim(_this.way1.realname)){
				_this.$loading.hide();
				_this.isfocus = 3;
			}else if(!$.trim(_this.way1.phone)){
				_this.$loading.hide();
				_this.isfocus = 4;
			}else if(!$.trim(_this.way1.money)){
				_this.$loading.hide();
				_this.isfocus = 5;
			}else{
				if(!/^\d{16,19}$/.test(_this.way1.bankNum)){
					_this.$loading.hide();
					_this.$alert('2','银行卡号格式错误');
					return;
				}
				if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(_this.way1.phone)){
					_this.$loading.hide();
					_this.$alert('2','手机号格式错误');
					return;
				}
				var postData = _this.$qs.stringify(_this.way1);
				_this.$axios.post('/agent/recharge/add',postData).then(function(res){
		    		if(res.data.message=='succ'){
		    			_this.$loading.hide();
		    			_this.$alert("1","提交成功",function(){
		    				_this.search();
		    				_this.recharge_2 = 2;
		    			})
		    		}else{
		    			_this.$loading.hide();
		    			_this.$alert("2",res.data.result)
		    		}
				}).catch(function (error) {
				    console.log(error);
				});
			}
		},
		wechatPay:function(){
			var _this =this;
			_this.way2.money2 = _this.way2.money*0.99;
			$('#wechatPayCode').empty();
			var postData = _this.$qs.stringify({money:_this.way2.money});
			
			_this.$axios.post('/wechat/pay/agent/PayQrCode',postData).then(function(res){
				console.log(res.data.result)
				_this.qrcode(res.data.result)
				/*makeCode(res.data);*/
			}).catch(function(error){
				console.log(error);
			});
		},
		qrcode:function(text) {
	      	let qrcode = new QRCode('wechatPayCode', {
	        width: 150,
	        height: 150, // 高度
	        text: text // 二维码内容
	        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
	        // background: '#f0f'
	        // foreground: '#ff0'
	        })
	        console.log(qrcode)
	        this.qr=false;
	        
	    },
		showWallet:function(){
			var _this  = this;
			_this.$axios.post('/agent/wallet/show').then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					data = data.result;
					_this.balance = data.balance;
					_this.freeze = data.guaranteeBalance;
					_this.spread = data.allExtendsMoney;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function(error){
				console.log(error);
			});
		},
		clearNoNum: function() {
			var _this = this;
			if(_this.way1.money){
				_this.way1.money = _this.way1.money.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符  
			    _this.way1.money = _this.way1.money.replace(/^\./g,""); //验证第一个字符是数字而不是  
			    _this.way1.money = _this.way1.money.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
			    _this.way1.money = _this.way1.money.replace(".","$#$").replace(/\./g,"").replace("$#$",".");  
			    _this.way1.money = _this.way1.money.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
			}  
		},
		clearNoNum2: function() {
			var _this = this;
			if(_this.way2.money){
				_this.way2.money = _this.way2.money.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符  
			    _this.way2.money = _this.way2.money.replace(/^\./g,""); //验证第一个字符是数字而不是  
			    _this.way2.money = _this.way2.money.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
			    _this.way2.money = _this.way2.money.replace(".","$#$").replace(/\./g,"").replace("$#$",".");  
			    _this.way2.money = _this.way2.money.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
			}  
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	    	this.currentPage=val;
	      	this.search();
	    },
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		getStatus:function(obj){
			if(obj==0){
				return "审核中";
			}else if(obj==1){
				return "充值成功";
			}else if(obj==-1){
				return "充值失败";
			}
		}
		
	},
	created:function(){
		this.search();
		this.showWallet();
	},
}
</script>

<style>
/*-----下拉框样式修改--------*/
#recharge .el-input__inner{
	height: 30px!important;
	line-height: 30px!important;
	border: 1px solid #E6E6E6!important;
	border-radius: 0!important;
}
#recharge .el-input__icon{
	height: auto!important;
	line-height: 30px!important;
}
#recharge .el-select-dropdown__item.selected{
	color: #FF464E!important;
}
#recharge .el-select .el-input.is-focus .el-input__inner{
	border-color: #e6e6e6!important;
}
#recharge .el-select .el-input__inner:focus{
	border-color: #e6e6e6!important;
}
#recharge .el-input__inner>i{
	opacity: 0!important;
}
/*-----------分页器样式------------*/
#recharge .el-pagination{
	text-align: center!important;
	margin-top: 20px!important;
}
#recharge .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E!important;
}
#recharge .el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E!important;
}
</style>

<style scoped>
#recharge{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*-------资金明细--------*/
.recharge_1{
	display: flex;
	align-items: center;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	padding: 20px 30px;
	box-sizing: border-box;
	margin-top: 15px;
}
.recharge_1 img{
	height: 50px;
	display: block;
	margin-right: 10px;
}
.recharge_1 .recharge_1_text{
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.recharge_1_title{
	font-size: 16px;
	color: #545454;
}
.recharge_1_content{
	display: flex;
}
.recharge_1_content p{
	margin-right: 30px;
	color: #545454;
}
.recharge_1_content p span{
	color: #FF464E;
}
/*--------账户充值/充值记录-------*/
.recharge_2{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	margin-top: 5px;
}
.recharge_2 li{
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: -1px;
	border-bottom: 1px solid transparent;
}
.recharge_2 span{
	color: #E6E6E6;
}
.recharge_2 li.recharge_2_active{
	border-bottom: 1px solid #FF464E;
	color: #FF464E;
}
/*---------充值方式------------*/
.recharge_3{
	padding: 20px;
	box-sizing: border-box;
}
.recharge_way{
	display: flex;
	align-items: center;
}
.recharge_way>p{
	width: 90px;
	color: #545454;
}
.recharge_way ul{
	display: flex;
	align-items: center;
}
.recharge_way ul li{
	position: relative;
	border: 1px solid #E6E6E6;
	height: 30px;
	box-sizing: border-box;
	padding: 0 10px;
	color: #808080;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	cursor: pointer;
}
.recharge_way ul li.way_active{
	border: 1px solid #FF464E;
	color: #FF464E;
}
.recharge_way ul li img{
	position: absolute;
	bottom: 0;
	right: 0;
	height: 15px;
}
.recharge_3_item{
	display: flex;
	margin-top: 20px;
}
.recharge_3_item>p{
	width: 90px;
	height: 30px;
	line-height: 30px;
	color: #545454;
}
/*--------收款账号-----------*/
.recharge_3_item .account_number{
	border: 1px solid #E6E6E6;
	width: 300px;
	padding: 10px 20px;
	box-sizing: border-box;
}
.recharge_3_item .account_number p{
	color: #545454;
	margin-bottom: 10px;
}
.recharge_3_item .account_number p:last-child{
	margin-bottom: 0;
}
.recharge_3_item .account_number p span{
	color: #FF464E;
}
.recharge_3_item input[type='text']{
	height: 30px;
	width: 300px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	padding-left: 10px;
}
.recharge_3_item input[type='button']{
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
	width: 120px;
	height: 30px;
	margin-left: 10px;
}
.cue{
	color: #FF464E;
	margin-left: 90px;
	margin-top: 10px;
	margin-bottom: -10px;
}
.money{
	display: flex;
	align-items: center;
}
.money span{
	height: 28px;
	width: 40px;
	text-align: center;
	line-height: 28px;
	color: #FFFFFF;
	background-color: #E6E6E6;
	margin-left: -40px;
}
/*-------按钮----------*/
.recharge_3_btn{
	width: 390px;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.recharge_3_btn input{
	width: 120px;
	height: 30px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
}
/*-----温馨提示----------*/
.warm_prompt{
	background-color: #F5F5F5;
	color: #545454;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 20px;
}
.warm_prompt div{
	display: flex;
	align-items: center;
}
.warm_prompt div img{
	height: 15px;
	display: block;
	margin-right: 5px;
}
.warm_prompt div p{
	font-size: 16px;
}
.warm_prompt ul li{
	margin-top: 10px;
}
.warm_prompt ul li span{
	color: #FF464E;
}
/*--------微信支付宝选择-----------*/
.wx_zfb{
	display: flex;
}
.wx_zfb li{
	height: 30px;
	width: 120px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-right: 15px;
	cursor: pointer;
}
.wx_zfb li.wx_zfb_active{
	border: 1px solid #FF464E;
}
.wx_zfb li img:first-child{
	height: 20px;
	display: block;
}
.wx_zfb li img:last-child{
	height: 15px;
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
}
/*--------生成支付二维码----------*/
.pay_code>p{
	color: #545454;
	margin-top: 20px;
}
.pay_code>p span{
	color: #FF464E;
}
.code_box{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #DDDDDD;
	padding: 30px 0;
	margin-top: 20px;
}
.code_box>img{
	height: 300px;
	margin-left: 180px;
	display: block;
}
.code{
	width: 150px;
	position: relative;
}
.code img{
	width: 100%;
	display: block;
}
/*.code img:last-child{
	position: absolute;
	top: 0;
	background-color: #fff;
}*/
/*#wechatPayCode{
	position: absolute;
	top: 0;
	background-color: #fff;
}
#wechatPayCode img{
	width: 100%;
	display: block;
}*/
/*-----------充值记录---------------*/
.search{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.search>input[type='text']{
	width: 200px;
	height: 30px;
	border: 1px solid #E6E6E6;
	padding-left: 10px;
	box-sizing: border-box;
	margin-right: 20px;
}
.search>input[type='button']{
	width: 120px;
	height: 30px;
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
	margin-left: 10px;
}
/*--------日期插件样式修改-----------*/
.el-input__inner{
	height: 30px;
	line-height: 30px;
	padding: 0;
	border-radius: 0;
	width: 280px;
}
input.el-range-input{
	border: 1px solid #E6E6E6;
}
/*-------下拉框样式---------*/
.el-select{
	width: 300px;
}
/*-------记录列表------------*/
.list_title{
	display: flex;
	background-color: #F5F5F5;
	height: 30px;
	align-items: center;
	margin-top: 20px;
}
.list_title p{
	width: 25%;
	text-align: center;
	color: #545454;
}
.list_item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
	height: 30px;
}
.list_item p{
	width: 25%;
	color: #808080;
	text-align: center;
}
input[type='text'].focus{
	border: 1px solid #FF464E;
}
.focus{
	border: 1px solid #FF464E;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
</style>
